<template>
  <div class="industrial-interface">
    <div class="header">
      <div class="logo-section">
        <div class="logo">OROSE</div>
        <div class="logo-subtitle">Excellence in Mechatronics</div>
              </div>
      <div class="title">MP2300S电池缺电报表</div>
            </div>

    <div class="main-content">
      <!-- 左侧监控区域 -->
      <div class="left-panel">
        <div class="monitor-section">
          <div class="section-title">紧力监控(N)</div>
          
          <div class="servo-item">
            <div class="servo-label">A伺服张力</div>
            <div class="servo-value no-status">{{ runStatus.servoATension }}</div>
          </div>

          <div class="servo-item">
            <div class="servo-label">B伺服张力</div>
            <div class="servo-value no-status">{{ runStatus.servoBTension }}</div>
          </div>
              </div>

        <div class="settings-section">
          <div class="setting-item">
            <div class="setting-label">当前产量</div>
            <div class="setting-value no-status">{{ statsData.totalProduction }}</div>
              </div>
          
          <div class="setting-item">
            <div class="setting-label">设定产量</div>
            <div class="setting-value no-status">{{ runStatus.targetProduction }}</div>
              </div>
          
          <div class="status-indicator">
            <div class="status-label">{{ formatTime(Date.now()) }}</div>
            <div class="status-text">清零</div>
              </div>
              </div>
              </div>

      <!-- 中央信息区域 -->
      <div class="center-panel">
        <div class="file-info">
          <div class="file-title">当前文件名称</div>
          <div class="file-content">
            <div class="file-line">
              <span class="file-id">{{ runStatus.currentFileId }}</span>
              <span class="file-name">{{ runStatus.currentFileName }}</span>
            </div>
          </div>
        </div>

        <div class="process-info">
          <div class="process-row">
            <div class="process-item">
              <span class="process-label">当前步序第</span>
              <span class="process-value">{{ runStatus.currentStep }}</span>
              <span class="process-unit">步</span>
              <span class="process-detail">{{ runStatus.stepDetail }}</span>
            </div>
          </div>

          <div class="process-row">
            <div class="process-item">
              <span class="process-label">线圈CT</span>
              <span class="process-value">{{ runStatus.coilCT }}</span>
              <span class="process-unit">分</span>
              <span class="process-detail">{{ runStatus.coilDetail }}</span>
                  </div>
                </div>
          
          <div class="process-row">
            <div class="process-item">
              <span class="process-label">图纸监控第</span>
              <span class="process-value">{{ runStatus.drawingNumber }}</span>
              <span class="process-unit">图</span>
              <span class="process-detail">{{ runStatus.drawingDetail }}</span>
              </div>
            </div>

          <div class="process-row">
            <div class="process-item">
              <span class="process-label">绕线速度</span>
              <span class="process-value">{{ runStatus.windingSpeed1 }}</span>
              <span class="process-value">{{ runStatus.windingSpeed2 }}</span>
            </div>
          </div>

          <div class="process-row">
            <div class="process-item">
              <span class="process-label">深度条码</span>
              <span class="process-barcode">{{ runStatus.barcode1 }}</span>
        </div>
          </div>

          <div class="process-row">
            <div class="process-item">
              <span class="process-barcode">{{ runStatus.barcode2 }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧状态区域 -->
      <div class="right-panel">
        <div class="action-type">
          <div class="action-label">动作类型</div>
          <div class="action-status" :class="getActionStatusClass()">
            {{ runStatus.actionType }}
          </div>
        </div>

        <div class="current-status">
          <div class="status-label">当前状态</div>
          <div class="status-display" :class="getCurrentStatusClass()">
            {{ runStatus.currentStatus }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, onUnmounted} from 'vue';

// 运行状态数据
const runStatus = ref({
  servoATension: 'NO_10(M_1514)',
  servoBTension: 'NO_10(M_146)',
  currentFileId: '##',
  currentFileName: 'AAAAAAAAAAAAAAAA',
  currentStep: '###',
  stepDetail: '###',
  coilCT: '###',
  coilDetail: '秒',
  drawingNumber: '###.##',
  drawingDetail: '图',
  windingSpeed1: '######',
  windingSpeed2: '######',
  barcode1: 'AAAAAAAAAAAAAAAA',
  barcode2: 'AAAAAAAAAAAAAAAA',
  actionType: '绕线完成',
  currentStatus: '待机中',
  targetProduction: '#####'
});

// 生产统计数据
const statsData = ref({
  totalProduction: '#####'
});

// 获取动作状态样式类
function getActionStatusClass() {
  return runStatus.value.actionType === '绕线完成' ? 'status-complete' : 'status-normal';
}

// 获取当前状态样式类
function getCurrentStatusClass() {
  return runStatus.value.currentStatus === '待机中' ? 'status-standby' : 'status-normal';
}

function formatTime(timestamp) {
  return new Date(timestamp).toLocaleTimeString('zh-CN', {
    hour12: false,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });
}

// 模拟数据更新
let updateInterval;

onMounted(() => {
  updateInterval = setInterval(() => {
    // 这里可以添加实时数据更新逻辑
  }, 1000);
});

onUnmounted(() => {
  if (updateInterval) {
    clearInterval(updateInterval);
}
});
</script>

<style scoped>
.industrial-interface {
  background-color: #c0c0c0;
  min-height: 100vh;
  font-family: 'Microsoft YaHei', sans-serif;
  padding: 0;
  margin: 0;
}

.header {
  background-color: #e0e0e0;
  border-bottom: 2px solid #808080;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-section {
  display: flex;
  flex-direction: column;
}

.logo {
  font-size: 18px;
  font-weight: bold;
  color: #d32f2f;
  line-height: 1;
}

.logo-subtitle {
  font-size: 10px;
  color: #666;
  margin-top: 2px;
}

.title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.main-content {
  display: grid;
  grid-template-columns: 280px 1fr 200px;
  gap: 8px;
  padding: 8px;
  min-height: calc(100vh - 60px);
}

.left-panel {
  background-color: #f0f0f0;
  border: 2px solid #808080;
  border-style: inset;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.section-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
  text-align: center;
}

.servo-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.servo-label {
  font-size: 12px;
  color: #333;
  width: 80px;
}

.servo-value {
  background-color: white;
  border: 1px solid #808080;
  border-style: inset;
  padding: 4px 8px;
  font-size: 11px;
  font-family: monospace;
  flex: 1;
}

.setting-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.setting-label {
  font-size: 12px;
  color: #333;
  width: 80px;
}

.setting-value {
  background-color: white;
  border: 1px solid #808080;
  border-style: inset;
  padding: 4px 8px;
  font-size: 11px;
  font-family: monospace;
  flex: 1;
}

.no-status {
  color: #d32f2f;
}

.status-indicator {
  margin-top: 20px;
  text-align: center;
}

.status-label {
  font-size: 11px;
  color: #666;
  margin-bottom: 4px;
}

.status-text {
  font-size: 12px;
  color: #333;
}

.center-panel {
  background-color: #f0f0f0;
  border: 2px solid #808080;
  border-style: inset;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.file-info {
  border: 1px solid #808080;
  border-style: inset;
  background-color: #fff;
  padding: 8px;
}

.file-title {
  font-size: 12px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.file-content {
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  padding: 8px;
  min-height: 40px;
}

.file-line {
  font-size: 11px;
  font-family: monospace;
  color: #333;
}

.file-id {
  color: #d32f2f;
  margin-right: 8px;
}

.process-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.process-row {
  display: flex;
  align-items: center;
  min-height: 32px;
  background-color: white;
  border: 1px solid #808080;
  border-style: inset;
  padding: 4px 8px;
}

.process-item {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.process-label {
  font-size: 12px;
  color: #333;
  white-space: nowrap;
}

.process-value {
  font-size: 11px;
  font-family: monospace;
  color: #d32f2f;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 2px 4px;
  margin: 0 2px;
}

.process-unit {
  font-size: 12px;
  color: #333;
  margin-right: 8px;
}

.process-detail {
  font-size: 11px;
  color: #d32f2f;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 2px 4px;
}

.process-barcode {
  font-size: 11px;
  font-family: monospace;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 2px 4px;
  flex: 1;
}

.right-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.action-type, .current-status {
  background-color: #f0f0f0;
  border: 2px solid #808080;
  border-style: inset;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.action-label, .status-label {
  font-size: 12px;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.action-status, .status-display {
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  min-width: 120px;
  color: #333;
}

.status-complete {
  background: linear-gradient(to bottom, #a8e6a3, #88d982);
  border: 1px solid #4a9;
}

.status-standby {
  background: linear-gradient(to bottom, #a8e6a3, #88d982);
  border: 1px solid #4a9;
}

.status-normal {
  background-color: #e0e0e0;
  border: 1px solid #999;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .main-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  
  .left-panel, .right-panel {
    order: 2;
  }
  
  .center-panel {
    order: 1;
  }
}
</style>
